<template>
    <view class="container">
        <u-steps class="u-p-t-20" :list="numList" mode="number" :current="1" active-color="#ff5000"></u-steps>
        <view class="item-container">
            <view class="title">基本信息</view>
            <view class="content">
                <u-form :model="basicInfoForm" ref="basicInfoForm" label-width="200" :error-type="errorType">
                    <u-form-item label="公司名称：" prop="company_name" required>
                        <u-input v-model="basicInfoForm.company_name" placeholder="请输入公司名称" :maxlength="20" clearable>
                        </u-input>
                    </u-form-item>
                    <u-form-item label="公司地址：" prop="company_address" required>
                        <u-input v-model="basicInfoForm.company_address" placeholder="请输入公司地址" :maxlength="20"
                            clearable></u-input>
                    </u-form-item>
                    <u-form-item label="公司电话：" prop="company_phone" required>
                        <u-input v-model="basicInfoForm.company_phone" placeholder="请输入公司电话" :maxlength="30" clearable>
                        </u-input>
                    </u-form-item>
                    <u-form-item label="公司邮箱：" prop="company_email" required>
                        <u-input v-model="basicInfoForm.company_email" placeholder="请输入公司邮箱" clearable></u-input>
                    </u-form-item>
                    <u-form-item label="员工总数(人)：" prop="employee_num" required>
                        <u-input v-model="basicInfoForm.employee_num" placeholder="请输入员工总数" clearable></u-input>
                    </u-form-item>
                    <u-form-item label="注册资金(万)：" prop="reg_money" required>
                        <u-input v-model="basicInfoForm.reg_money" placeholder="请输入注册资金" clearable></u-input>
                    </u-form-item>
                    <u-form-item label="联系人姓名：" prop="link_name" required>
                        <u-input v-model="basicInfoForm.link_name" placeholder="请输入联系人姓名" :maxlength="20" clearable>
                        </u-input>
                    </u-form-item>
                    <u-form-item label="联系人电话：" prop="link_phone" required>
                        <u-input v-model="basicInfoForm.link_phone" placeholder="请输入联系人电话" :maxlength="11" clearable>
                        </u-input>
                    </u-form-item>
                </u-form>
            </view>
        </view>
        <view class="next-btns u-text-center u-p-b-20">
            <u-button class="u-m-r-40" size="mini" @click="handleBackStep">上一步</u-button>
            <u-button size="mini" @click="handleNextStep">下一步</u-button>
        </view>
    </view>
</template>

<script>
    import * as API_Shop from '@/api/shop'
    import {
        RegExp
    } from '@/ui-utils'
    export default {
        data() {
            const req_rule = (message, trigger) => ({
                required: true,
                message,
                trigger: [trigger || 'blur']
            });
            const len_rule = (min, max) => ({
                min,
                max,
                message: `'长度在 ${min} 到 ${max} 个字符`
            });
            return {
                numList: [{
                    name: '入驻协议'
                }, {
                    name: '基本信息'
                }, {
                    name: '认证信息'
                }, {
                    name: '资质信息'
                }, {
                    name: '店铺信息'
                }],
                basicInfoForm: {
                    company_name: '',
                    company_address: '',
                    company_phone: '',
                    company_email: '',
                    employee_num: '',
                    reg_money: '',
                    link_name: '',
                    link_phone: ''
                },
                rules: {
                    company_name: [req_rule('请输入公司名称！')],
                    company_address: [req_rule('请输入公司地址！')],
                    company_phone: [
                        req_rule('请输入公司电话！'),
                        {
                            validator: (rule, value, callback) => {
                                if (RegExp.mobile.test(value) || RegExp.TEL.test(value)) {
                                    callback()
                                } else {
                                    callback(new Error('请输入正确的手机号或者固定电话'))
                                }
                            },
                            trigger: 'blur'
                        }
                    ],
                    company_email: [
                        req_rule('请输入公司邮箱！'),
                        {
                            validator: (rule, value, callback) => {
                                if (!RegExp.email.test(value)) {
                                    callback(new Error('请输入正确的公司邮箱'))
                                } else {
                                    callback()
                                }
                            },
                            trigger: 'blur'
                        }
                    ],
                    employee_num: [{
                        validator: (rule, value, callback) => {
                            if (!value) {
                                callback(new Error('请输入员工总数！'))
                            } else if (!RegExp.integer.test(value)) {
                                callback(new Error('员工人数应为正整数，且不为零'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur'
                    }],
                    reg_money: [{
                        validator: (rule, value, callback) => {
                            if (!value) {
                                callback(new Error('请输入注册资金！'))
                            } else if (!RegExp.integer.test(value)) {
                                callback(new Error('注册资金应为正整数，且不为零'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur'
                    }],
                    link_name: [req_rule('请输入联系人姓名！')],
                    link_phone: [
                        req_rule('请输入联系人电话！'),
                        {
                            validator: (rule, value, callback) => {
                                if (!RegExp.mobile.test(value)) {
                                    callback(new Error('联系人电话格式不正确'))
                                } else {
                                    callback()
                                }
                            },
                            trigger: 'blur'
                        }
                    ]
                },
                errorType: ['toast']
            };
        },
        onLoad() {
            API_Shop.getApplyShopInfo().then(response => {
                Object.keys(this.basicInfoForm).forEach(key => this.basicInfoForm[key] = response[key])
            })
        },
        onReady() {
            this.$refs.basicInfoForm.setRules(this.rules);
        },
        methods: {
            // 上一步
            handleBackStep() {
                uni.navigateBack()
            },
            // 下一步
            handleNextStep() {
                const params = JSON.parse(JSON.stringify(this.basicInfoForm))
                this.$refs.basicInfoForm.validate(valid => {
                    if (valid) {
                        API_Shop.applyShopStep(1, params).then(response => {
                            this.$u.route('/pages/shop/apply/auth-info')
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .container {
        height: 100%;
        background-color: #FFFFFF;

        .item-container {
            border-top: 1px dashed #E1E1E1;
            margin: 20rpx 0;

            .title {
                margin: 20rpx 0;
                font-size: 40rpx;
                font-weight: 600;
                text-align: center;
            }

            .content {
                padding: 0 30rpx;
            }

            .licence-range {
                margin-left: 260rpx;
            }
        }
    }
</style>
